<template>
  <div>
    <LTTable v-bind="tableInit" :tableData="tableData" v-model:paginationConfig="paginationConfig"
      @handleSizeChangeFn="handleSizeChange" @handleCurrentChangeFn="handleCurrentChange">
      <template #header="scope">
        <div class="flex w-full mb-10" v-if="tableInit?.btn?.length > 0">
          <el-button v-if="tableInit?.btn.includes('add')" type="primary" @click="emit('pageAdd')">新增</el-button>
          <el-button v-if="tableInit?.btn.includes('del')" @click="emit('pageDel')">删除</el-button>
          <el-button style="border: 1px solid #00b7ff;" v-if="tableInit?.btn.includes('hot')"
            @click="emit('pageHot')">设置热点</el-button>
          <!-- <template v-if="tableInit?.btn.includes('search')">
            <el-input class="mr-[20px]" style="width: 250px;" v-model="serchVal" placeholder="请输入关键字" />
            <el-button type="primary">搜索</el-button>
          </template> -->
          <el-form-item v-if='tableInit?.btn.includes("mailbox")' label="邮箱" prop="name">
            <el-input @input="changeFn" v-model="mailboxValue" autocomplete="off" placeholder="请输入邮箱" />
          </el-form-item>



          <el-button style="border: 1px solid #00b7ff;margin-left: auto" v-if="tableInit?.btn.includes('export')"
            @click="emit('exportFn')">导出</el-button>


        </div>
      </template>
      <template v-for="(   item, index   ) in    otherPropSlot   " :key="index" #[item.slot]="scope">
        <!-- <template v-for="(i, n) in slots" :key="n" #[n]='{ row }'>
            <slot :name="n" :row="row"></slot>
        </template> -->
        <template v-if="item.slot">
          <slot :name="item.slot" :row="scope.row" />
        </template>
      </template>
      <template #date="scoped">
        <!-- utc格式转换 -->
        <div>{{ $filters.formatTime(scoped.row.date) }}</div>
        <!-- 时间戳格式转换 -->
        <!-- <div v-time >{{ scoped.row.date }}</div> -->
      </template>
    </LTTable>
  </div>
</template>

<script setup lang="ts">
import LTTable from "@/components/base-ui/table";
import { getOrderorder, changeorderupdateemail } from '@/api/mailbox'

import { ref } from "vue";
const props = defineProps({
  tableInit: {
    type: Object,
    required: true
  },
  tableData: {
    type: Array,
    required: true
  },
  total: {
    type: Number,
    default: 0
  },
  paginationConfig: {
    type: Object,
    default: () => ({ currentPage: 1, pageSize: 10 })
  }
});

const paginationConfig = ref({ currentPage: 0, pageSize: 10 });

const otherPropSlot = props.tableInit.propList.filter((item: any) => {
  if (item.slot == "date") return false; //将公共的插槽排除到动态插槽之外
  return true;
});
const emit = defineEmits([
  "sizeChange",
  "currentChange",
  "pageAdd",
  "pageDel",
  "exportFn",
  "pageHot"
]);

// const slots = useSlots()

const handleSizeChange = e => emit("sizeChange", e);

const handleCurrentChange = e => emit("currentChange", e);

const serchVal = ref("");




const mailboxValue = ref('')
const mailboxID = ref('')
const getOrdermailbox = () => {
  getOrderorder().then(res => {
    mailboxValue.value = res?.result?.email ?? ''
    mailboxID.value = res?.result?.id ?? ''
  })
}
getOrdermailbox()

const timer = ref(null)
const changeFn = (e) => {
  if (timer.value) {
    clearTimeout(timer.value)
  }


  timer.value = setTimeout(() => {
    setmailbox()
  }, 3000);


}

const setmailbox = () => {
  console.log('发送了')
  let Q = {
    id: mailboxID.value,
    email: mailboxValue.value
  }
  changeorderupdateemail(Q).then(rs => {

  })
}
</script>

<style scoped></style>
